<script setup>
import { reactive } from "vue"

// 原始对象raw
const raw = {}
// Proxy代理对象
const proxy = reactive(raw)

// 代理对象和原始对象不相等
console.log(proxy === raw); // false

// 在一个代理对象上调用reactive()会返回它自己
console.log(reactive(proxy) === proxy); // true

// 依靠深层响应式，响应式对象内的嵌套对象依然是代理：
proxy.nested = raw
console.log(proxy.nested === raw);


// reactive() 的局限性
// 1. reactive仅对对象类型有效（对象、数组和 Map、Set 这样的集合类型），而对 string、number 和 boolean 这样的 原始类型 无效。
// 2. 因为 Vue 的响应式系统是通过属性访问进行追踪的，因此我们必须始终保持对该响应式对象的相同引用。
// 这意味着我们不可以随意地“替换”一个响应式对象，因为这将导致对初始引用的响应性连接丢失
let state = reactive({count: 0})
// 将响应式对象的属性赋值或解构至本地变量时，或是将该属性传入一个函数时，我们会失去响应性
let n = state.count
let { count } = state
function increment() {
  n+=1
  count++
  // 失去响应性,此时n变化但是页面没有变化
  console.log(n, state.count, count);
}

</script>

<template>
  <h1>n: {{ n }}</h1>
  <h1>state.count: {{ state.count }}</h1>
  <h1>count: {{ count }}</h1>
  <button @click="increment">count++</button>
</template>

<style></style>
